<template>
  <div id="v-mask">
    <el-dialog :title="maskTitle" :visible.sync="showMask" :width="maskWidth" :before-close="handleClose" :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="true" center>
      <!-- 默认提示 -->
      <div class="content" v-if="maskData.defaultTitleBox">
        <div class="title">
          <h3>{{maskData.defaultTitle}}</h3>
        </div>
      </div>

      <!-- 工单分类节点操作 -->
      <div class="content work-order-details" v-if="maskData.operationNode">
        <div class="row clearfix">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">分类名称：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入类型" v-model.trim="maskData.name"></el-input>
            </span>
          </div>
        </div>
      </div>

      <!-- 工单详情弹框 -->
      <div class="content work-order-details" v-if="maskData.workOrderDetails">
        <div class="row clearfix">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">创建日期：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入类型" disabled v-model.trim="maskData.createTime"></el-input>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">登记人：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入类型" disabled v-model.trim="maskData.registerPerson"></el-input>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">工单编号：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入类型" disabled v-model.trim="maskData.workOderNo"></el-input>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">电话号码：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入类型" disabled v-model.trim="maskData.phoneNum"></el-input>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">客户姓名：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入类型" disabled v-model.trim="maskData.clientName"></el-input>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">ESN编号/订单编号：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入类型" disabled v-model.trim="maskData.esnOrderNo"></el-input>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">工单分类：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入类型" disabled v-model.trim="maskData.orderNameClassification"></el-input>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">工单类型：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入类型" disabled v-model.trim="maskData.workOderType"></el-input>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">工单状态：</span>
            <span class="fl span-input">
              <!-- <el-input placeholder="请输入类型" disabled v-model.trim="maskData.workOrderStatus"></el-input> -->
              <el-select v-model="maskData.orderStatus" disabled placeholder="请选择">
                <el-option v-for="item in maskData.workOrderStatusList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">城市地区：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入类型" disabled v-model.trim="maskData.cityarea"></el-input>
            </span>
          </div>
        </div>
        <div class="row clearfix mb15">
          <span class="row-item-title fl">工单内容：</span>
          <p class="row-item-textarea fr">
            {{maskData.orderContent}}
          </p>
          <!-- <textarea class="row-item-textarea" disabled v-model.trim="maskData.orderContent"></textarea> -->
        </div>
        <div class="row clearfix mb15">
          <span class="row-item-title fl">备注：</span>
          <p class="row-item-textarea fr">
            {{maskData.remark}}
          </p>
        </div>
        <!-- <div class="row clearfix mb15">
          <span class="row-item-title fl">添加附加意见：</span>
        </div> -->
        <div class="row clearfix mb15">
          <span class="row-item-title fl">附加意见记录：</span>
          <p class="row-item-textarea fr" v-for="item in maskData.additional" :key="item">
            <span class="default-color">{{item.createTime}}</span>&nbsp;&nbsp;
            <span class="default-color">{{item.handlePerson}}</span>&nbsp;&nbsp;
            <span class="default-color">（{{item.role}}）：</span>&nbsp;&nbsp;
            <span>{{item.handleDetail}}</span>
          </p>
        </div>
        <div class="row clearfix">
          <span class="row-item-title fl">处理意见记录：</span>
          <p class="row-item-textarea fr" v-for="item in maskData.handle" :key="item">
            <span class="default-color">{{item.createTime}}</span>&nbsp;&nbsp;
            <span class="default-color">{{item.handlePerson}}</span>&nbsp;&nbsp;
            <span class="default-color">（{{item.role}}）</span>&nbsp;&nbsp;
            <span class="default-color">&#8594;（{{item.handleStatus}}）</span>&nbsp;&nbsp;：
            <span>{{item.handleDetail}}</span>
          </p>
        </div>

      </div>
      <!-- 岗位类型 -- 添加类型 -->
      <div class="content" v-if="maskData.postTypeBox">
        <div class="grid-content post-type-content-submission" v-if="maskData.postTypeBox">
          <div class="row clearfix mb15">
            <div class="row-item clearfix fl">
              <span class="row-item-title fl">类型：</span>
              <span class="fl span-input">
                <el-input placeholder="请输入类型" v-model.trim="maskData.types"></el-input>
              </span>
            </div>
          </div>
          <div class="row clearfix mb15">
            <span class="row-item-title fl">备注：</span>
            <div class="row-item clearfix fl">
              <span class="fl span-input">
                <el-input placeholder="请输入类型" v-model.trim="maskData.textarea" type="textarea" :autosize="{ minRows: 5, maxRows: 8}"></el-input>
              </span>
            </div>
          </div>
          <!-- <div class="row clearfix">
              <el-row>
                <el-button type="primary">提交</el-button>
                <el-button>取消</el-button>
              </el-row>
          </div>-->
        </div>
      </div>
      <!-- 组织架构弹框 -->
      <div class="content" v-if="maskData.organizationalStructureBox">
        <div class="row clearfix">
          <!-- <div class="row-item clearfix fl">
          <span class="row-item-title fl">
            角色ID：
          </span>
          <span class="fl span-input">
            <el-input placeholder="请输入内容" v-model="maskData.roleId"></el-input>
          </span>
          </div>-->
          <!-- <div class="row-item clearfix fl">
          <span class="row-item-title fl">
            所属行政区：
          </span>
          <span class="fl span-input">
            <el-cascader
            v-model="maskData.regionName"
            :options="maskData.regionNameList"
            :props="{ checkStrictly: true }"
            clearable></el-cascader>
          </span>
          </div>-->
        </div>
        <div class="row clearfix">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">部门名称：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入内容" v-model.trim="maskData.regionName"></el-input>
              <!-- <i v-if="maskData.regionNameText">{{maskData.regionNameText}}</i>
            <el-cascader
            v-model="maskData.regionName"
            :options="maskData.regionNameList"
            :props="{ checkStrictly: true }"
              clearable></el-cascader>-->
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">部门编码：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入内容" v-model.trim="maskData.regionCode"></el-input>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">上级部门：</span>
            <span class="fl span-input">
              <i v-if="maskData.pRegionIdText">{{maskData.pRegionIdText}}</i>
              <el-cascader v-model="maskData.pRegionId" :options="maskData.regionNameList" :props="{ checkStrictly: true , label:'regionName',value:'regionId'}" clearable></el-cascader>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">排序编码：</span>
            <span class="fl span-input">
              <el-input @mousewheel.native.prevent placeholder="请输入内容" type="number" v-model.trim="maskData.sort"></el-input>
            </span>
          </div>
          <!-- <div class="row-item clearfix fl">
          <span class="row-item-title fl">
            下级部门
          </span>
          <span class="fl span-input">
            <el-select v-model="maskData.initiatorMonth" placeholder="请选择"> 
              <el-option
                v-for="item in maskData.installmentNumList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </span>
          </div>-->
        </div>
        <div class="row clearfix">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">是否督办部门：</span>
            <span class="fl span-input">
              <el-select v-model="maskData.isWatchRegion" placeholder="请选择">
                <el-option v-for="item in maskData.isWatchRegionList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">是否转派部门</span>
            <span class="fl span-input">
              <el-select v-model="maskData.isTransferRegion" placeholder="请选择">
                <el-option v-for="item in maskData.isTransferRegionList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">是否承办部门：</span>
            <span class="fl span-input">
              <el-select v-model="maskData.isAcceptRegion" placeholder="请选择">
                <el-option v-for="item in maskData.isAcceptRegionList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </span>
          </div>
          <!-- <div class="row-item clearfix fl">
          <span class="row-item-title fl">
            部门公开位置：
          </span>
          <span class="fl span-input">
            <el-select v-model="maskData.initiatorMonth" placeholder="请选择"> 
              <el-option
                v-for="item in maskData.installmentNumList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </span>
          </div>-->
        </div>
      </div>
      <!-- 人员管理弹框  -->
      <div class="content personnel-management-box" v-if="maskData.personnelManagementBox">
        <div class="row clearfix">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">手机号码：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入内容" v-model.trim="maskData.mobile"></el-input>
            </span>
          </div>
          <!-- <div class="row-item clearfix fl">
          <span class="row-item-title fl">
            工号：
          </span>
          <span class="fl span-input">
            <el-input placeholder="请输入内容" v-model.trim="maskData.workNumber"></el-input>
          </span>
          </div>-->
        </div>
        <div class="row clearfix">
          <div class="row-item clearfix fl mr15">
            <span class="row-item-title fl">姓名：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入内容" v-model.trim="maskData.realName"></el-input>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">密码：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入内容" type="password" v-model.trim="maskData.password"></el-input>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item clearfix fl mr15">
            <span class="row-item-title fl">账号：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入内容" v-model.trim="maskData.userName"></el-input>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">岗位：</span>
            <span class="fl span-input">
              <el-select v-model="maskData.workJobId" placeholder="请选择">
                <el-option v-for="item in maskData.workJobIdList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item clearfix fl mr15">
            <span class="row-item-title fl">角色：</span>
            <span class="fl span-input">
              <el-dropdown :hide-on-click="false">
                <span class="el-dropdown-link role-name border-line">
                  <i v-for="(oItem,i) in maskData.roles" :key="oItem+i">{{oItem.roleName}},</i>
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown" class="table-role-list">
                  <el-table ref="singleTable" :data="maskData.tableData" highlight-current-row @row-click="handleCurrentChange" style="width: 100%">
                    <el-table-column property="id" label="ID" width="120"></el-table-column>
                    <el-table-column property="name" label="角色名称" width="120"></el-table-column>
                  </el-table>
                  <el-pagination small layout="prev, pager, next" :current-page="maskData.pageNum" :page-size="5" @current-change="FnSizeChange" :total="maskData.total"></el-pagination>
                </el-dropdown-menu>
              </el-dropdown>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">所属行政区：</span>
            <span class="fl span-input show-text-span">
              <i v-if="maskData.showTopRegionNameText.label" class="show-text-i bgc-fff beyond-hiding ml10" :title="maskData.showTopRegionNameText.label">{{maskData.showTopRegionNameText.label}}</i>
              <el-cascader v-model="maskData.topRegionName" :options="maskData.topRegionNameList" :props="{ checkStrictly: true , label:'regionName',value:'regionId' }" clearable></el-cascader>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item clearfix fl mr15">
            <span class="row-item-title fl">部门：</span>
            <span class="fl span-input show-text-span">
              <i v-if="maskData.showRegionNameText.label" class="show-text-i bgc-fff beyond-hiding ml10" :title="maskData.showRegionNameText.label">{{maskData.showRegionNameText.label}}</i>
              <el-cascader v-model="maskData.regionName" :options="maskData.regionNameList" :props="{ checkStrictly: true , label:'regionName',value:'regionId' }" clearable></el-cascader>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">是否话务员：</span>
            <span class="fl span-input">
              <el-select v-model="maskData.isCall" placeholder="请选择">
                <el-option v-for="item in maskData.isCallList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item clearfix fl mr15">
            <span class="row-item-title fl">是否禁用：</span>
            <span class="fl span-input">
              <el-select v-model="maskData.isStop" placeholder="请选择">
                <el-option v-for="item in maskData.isStopList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">绑定分机：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入内容" v-model.trim="maskData.extNumber"></el-input>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item clearfix fl mr15">
            <span class="row-item-title fl">加入排班：</span>
            <span class="fl span-input">
              <el-select v-model="maskData.enableWork" placeholder="请选择">
                <el-option v-for="item in maskData.enableWorkList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">分机密码：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入内容" type="password" v-model.trim="maskData.extPass"></el-input>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item clearfix fl mr15">
            <span class="row-item-title fl">是否默认转派员：</span>
            <span class="fl span-input">
              <el-select v-model="maskData.isTransfer" placeholder="请选择">
                <el-option v-for="item in maskData.isTransferList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">是否默认承办员：</span>
            <span class="fl span-input">
              <el-select v-model="maskData.isAccept" placeholder="请选择">
                <el-option v-for="item in maskData.isAcceptList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item clearfix fl mr15">
            <span class="row-item-title fl">是否承办主管：</span>
            <span class="fl span-input">
              <el-select v-model="maskData.isAcceptManager" placeholder="请选择">
                <el-option v-for="item in maskData.isAcceptManagerList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">是否在线客服：</span>
            <span class="fl span-input">
              <el-select v-model="maskData.isSupport" placeholder="请选择">
                <el-option v-for="item in maskData.isSupportList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </span>
          </div>
        </div>
        <!-- <div class="row clearfix">
        <div class="row-item clearfix fl mr15">
          <span class="row-item-title fl">
            创建人：
          </span>
          <span class="fl span-input">
            <el-input placeholder="请输入内容" v-model="maskData.founder"></el-input>
          </span>
        </div>
        <div class="row-item clearfix fl">
          <span class="row-item-title fl">
            创建时间：
          </span>
          <span class="fl span-input">
            <el-input placeholder="请输入内容" v-model="maskData.creationTime"></el-input>
          </span>
        </div>
        </div>-->
        <!-- <div class="row">
          <div class="row-item clearfix">
          <span class="row-item-title fl">
            上传头像：
          </span>
          <span class="row-item-headerImg fl" v-if="maskData.headerImg">
            <img :src="maskData.headerImg" alt="">
          </span>
          <span class="span-file fl">
              <el-button type="primary">添加照片</el-button>
              <input type="file" @change="FnFile">
          </span>
        </div>
        </div>-->
      </div>
      <div class="content beyond-details" v-if="maskData.addRole">
        <!-- 新增角色 -->
        <div class="row clearfix">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">角色ID：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入内容" v-model="maskData.roleId"></el-input>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">角色名称：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入内容" v-model="maskData.roleName"></el-input>
            </span>
          </div>
        </div>
      </div>

      <!-- 编辑角色 -->
      <div class="content beyond-details" v-if="maskData.editRole">
        <div class="row clearfix">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">角色ID：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入内容" v-model="maskData.roleId"></el-input>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">角色名称：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入内容" v-model="maskData.roleName"></el-input>
            </span>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer clearfix" v-if="maskData.defaultBox">
        <el-button @click="FnMask({type:'true',content:maskData.content})" class="default-bgc">保 存</el-button>
        <el-button type="primary" @click="FnMask({type:'false',content:maskData.content})" class="default-bgc">关闭窗口</el-button>
      </span>
      <span slot="footer" class="dialog-footer clearfix" v-if="maskData.trueOrFalse">
        <el-button @click="FnMask({type:'true',content:maskData.content})" class="default-bgc">确 定</el-button>
        <el-button type="primary" @click="FnMask({type:'false',content:maskData.content})" class="default-bgc">取 消</el-button>
      </span>
      <span slot="footer" class="dialog-footer clearfix" v-if="maskData.onlyFalse">
        <el-button type="primary" @click="FnMask({type:'false',content:maskData.content})" class="default-bgc">取 消</el-button>
      </span>

      <div class="content change-information" v-if="maskData.changeInformationBox">
        <!-- 个人信息 -->
        <div class="row clearfix">
          <div class="row-item clearfix">
            <span class="row-item-title fl">头像：</span>
            <span class="row-item-headerImg fl" v-if="maskData.headerImg">
              <img :src="maskData.headerImg" alt />
            </span>
            <span class="span-file fl">
              <el-button type="primary">添加照片</el-button>
              <input type="file" @change="FnFile" />
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item clearfix">
            <span class="row-item-title fl">姓名：</span>
            <span class="fl">
              <el-input placeholder="请输入内容" v-model="maskData.changeInformationName"></el-input>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item clearfix">
            <span class="row-item-title fl">手机：</span>
            <span class="fl">
              <el-input placeholder="请输入内容" type="number" @mousewheel.native.prevent v-model="maskData.phone"></el-input>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item clearfix">
            <span class="row-item-title fl">邮箱：</span>
            <span class="fl">
              <el-input placeholder="请输入内容" v-model="maskData.mailbox"></el-input>
            </span>
          </div>
        </div>
      </div>
      <div class="content contact-plan" v-if="maskData.contactPlan">
        <!-- 联系计划 -->
        <div class="row clearfix">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">客户姓名：</span>
            <span class="fl span-input border-line">
              {{maskData.customerName}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.customerName"></el-input> -->
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">电话号码：</span>
            <span class="fl span-input border-line">
              {{maskData.phoneNumber}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.phoneNumber"></el-input> -->
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">手机号码：</span>
            <span class="fl span-input border-line">{{maskData.mobile}}</span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">客户意向：</span>
            <span class="fl span-input border-line">{{maskData.customerIntention}}</span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">接触结果：</span>
            <span class="fl span-input border-line">
              {{maskData.resultVal}}
              <!-- <el-select v-model="maskData.resultVal" clearable placeholder="请选择">
              <el-option
                v-for="item in maskData.result"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
              </el-select>-->
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">提醒时间：</span>
            <span class="fl span-input selection-time">
              <el-date-picker v-model="maskData.reminderTime" value-format="yyyy-MM-dd HH-mm-ss" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">备注：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入内容" v-model="maskData.remarks"></el-input>
            </span>
          </div>
        </div>
      </div>
      <!-- 处理工单 -->
      <div class="content generate-work-order" v-if="maskData.handleWorkOrder||maskData.additionalComments">
        <div class="row clearfix mb15">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">创建日期：</span>
            <span class="fl span-input">
              <el-input placeholder="创建日期" disabled v-model.trim="maskData.createTime"></el-input>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">登记人：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入类型" disabled v-model.trim="maskData.registerPerson"></el-input>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">工单编号：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入类型" disabled v-model.trim="maskData.workOderNo"></el-input>
            </span>
          </div>
        </div>
        <div class="row clearfix mb15">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">电话号码：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入类型" disabled v-model.trim="maskData.phoneNum"></el-input>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">客户姓名：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入类型" disabled v-model.trim="maskData.clientName"></el-input>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">ESN编号/订单编号：</span>
            <span class="fl span-input">
              <el-input placeholder="ESM编号/订单编号" disabled v-model.trim="maskData.esnOrderNo"></el-input>
            </span>
          </div>
        </div>
        <div class="row clearfix mb15">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">工单分类：</span>
            <span class="fl span-input" :title="maskData.orderNameClassification">
              <el-input placeholder="请输入类型" disabled v-model.trim="maskData.orderNameClassification"></el-input>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">工单类型：</span>
            <span class="fl span-input">
              <!-- <el-input placeholder="请输入类型" disabled v-model.trim="maskData.workOderType"></el-input> -->
              <el-select v-model="maskData.workOderType" disabled placeholder="请选择">
                <el-option v-for="item in maskData.workOderTypeList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">工单状态：</span>
            <span class="fl span-input">
              <!-- <el-input placeholder="请输入类型" disabled v-model.trim="maskData.workOrderStatus"></el-input> -->
              <el-select v-model="maskData.orderStatus" disabled placeholder="请选择">
                <el-option v-for="item in maskData.workOrderStatusList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">城市地区：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入类型" disabled v-model.trim="maskData.cityarea"></el-input>
            </span>
          </div>
        </div>
        <!-- <div class="row clearfix mb15"> -->
        <!-- <div class="row-item clearfix fl">
            <span class="row-item-title fl">处理部门：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入类型" v-model.trim="maskData.types"></el-input>
            </span>
          </div> -->
        <!-- </div> -->
        <div class="row clearfix mb15">
          <span class="row-item-title fl">工单内容：</span>
          <p class="row-item-textarea fr">
            {{maskData.orderContent}}
          </p>
        </div>
        <div class="row clearfix mb15">
          <span class="row-item-title fl">备注：</span>
          <p class="row-item-textarea fr">
            {{maskData.remark}}
          </p>
        </div>
        <div class="row clearfix mb15">
          <span class="row-item-title fl">附加意见记录：</span>
          <p class="row-item-textarea fr" v-for="item in maskData.additional" :key="item">
            <span class="default-color">{{item.createTime}}</span>&nbsp;&nbsp;
            <span class="default-color">{{item.handlePerson}}</span>&nbsp;&nbsp;
            <span class="default-color">（{{item.role}}）</span>&nbsp;&nbsp;
            <!-- <span class="default-color">&#8594;（{{item.handleStatus}}）</span>&nbsp;&nbsp;： -->
            <span>{{item.handleDetail}}</span>
          </p>
        </div>
        <div class="row clearfix mb15" v-if="maskData.additionalBox">
          <span class="row-item-title fl">添加附加意见：</span>
          <textarea class="row-item-textarea mb15" :rows="4" v-model.trim="maskData.additionalText"></textarea>
          <div class="row clearfix">
            <el-button type="primary" class="fr" @click="FnMask({type:'additional',content:maskData})">保存</el-button>
          </div>
        </div>
        <div class="row clearfix mb15">
          <span class="row-item-title fl">处理意见记录：</span>
          <p class="row-item-textarea fr" v-for="(item,index) in maskData.handle" :key="item+index">
            <span class="default-color">{{item.createTime}}</span>&nbsp;&nbsp;
            <span class="default-color">{{item.handlePerson}}</span>&nbsp;&nbsp;
            <span class="default-color">（{{item.role}}）</span>&nbsp;&nbsp;
            <span class="default-color">&#8594;（{{item.handleStatus}}）</span>&nbsp;&nbsp;：
            <span>{{item.handleDetail}}</span>
          </p>

        </div>
        <div class="row clearfix mb15" v-if="maskData.addHandlingBox">
          <span class="row-item-title fl">添加处理意见：</span>
          <textarea class="row-item-textarea mb15" :rows="4" v-model.trim="maskData.addHandlingText"></textarea>
          <!-- <div class="row clearfix">
            <div class="row-item clearfix fr">
              <span class="fr">
            <el-button type="primary" @click="FnMask({type:'addHandling',content:maskData})">保存</el-button>
              </span>
            </div>
        </div> -->
        </div>

        <div class="row clearfix" v-if="maskData.circulation">
          <div class="row-item clearfix fr">
            <span class="fl">工单流转/归档：</span>
            <span class="fl">
              <el-radio-group v-model="maskData.orderDeptId">
                <el-radio :label="item.value" v-for="(item,index) in maskData.jobTypeList" :key="item+index">{{item.label}}</el-radio>
              </el-radio-group>
            </span>
          </div>
        </div>
        <div class="row clearfix" v-if="maskData.circulation">
          <div class="row-item clearfix fr">
            <span class="fr">
              <el-button type="primary" @click="FnMask({type:'workOrderFlow',content:maskData})">提交</el-button>
            </span>
          </div>
        </div>

      </div>

      <div class="content generate-work-order change-work-order" v-if="maskData.changeWorkOrder">
        <!-- 修改工单 -->
        <div class="row clearfix row-processing-records">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">客户姓名：</span>
            <span class="fl span-input">{{maskData.customerName}}</span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">性别：</span>
            <span class="fl span-input">
              <i v-if="maskData.sex==0">男</i>
              <i v-if="maskData.sex==1">女</i>
              <!-- <el-radio v-model="maskData.sex" :label="0">男</el-radio>
              <el-radio v-model="maskData.sex" :label="1">女</el-radio>-->
            </span>
          </div>
          <div class="row-item clearfix fl processing-records">
            <span class="row-item-title fl">处理记录：</span>
            <span class="fl border-line">
              <p v-if="maskData.orderRecords.length">工单处理记录：</p>
              <ul>
                <li v-for="(item,index) in maskData.orderRecords" :key="index">{{index+1}}、{{item}}</li>
              </ul>
              <p v-if="maskData.qualityRecords.length">质检处理记录：</p>
              <ul v-if="maskData.qualityRecords.length">
                <li v-for="(item,index) in maskData.qualityRecords" :key="index">{{index+1}}、{{item}}</li>
              </ul>
              <p v-if="maskData.businessRecords.length">业务处理记录：</p>
              <ul v-if="maskData.businessRecords.length">
                <li v-for="(item,index) in maskData.businessRecords" :key="index">{{index+1}}、{{item}}</li>
              </ul>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">手机号码：</span>
            <span class="fl span-input">
              {{maskData.phoneNumber}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.phoneNumber"></el-input> -->
            </span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">电话：</span>
            <span class="fl span-input">
              {{maskData.telephone}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.telephone"></el-input> -->
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">登记人工号：</span>
            <span class="fl span-input">{{maskData.orderWorkName}}</span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">登记人姓名：</span>
            <span class="fl span-input">
              {{maskData.orderWorkNumber}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.jobName"></el-input> -->
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">客户卡号：</span>
            <span class="fl span-input">
              {{maskData.cardNo}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.customerCard"></!-->
            </span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">工单编号：</span>
            <span class="fl span-input">
              {{maskData.orderNo}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.orderNo"></el-input> -->
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">业务类型：</span>
            <span class="fl span-input">{{maskData.businessTypeValText}}</span>
            <!-- <span class="fl span-input">
            <el-select v-model="maskData.businessTypeVal" clearable placeholder="请选择">
              <el-option
                v-for="item in maskData.businessType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            </span>-->
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">下单时间：</span>
            <span class="fl span-input">
              {{maskData.orderTime}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.orderTime"></el-input> -->
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">工单接收组：</span>
            <span class="fl span-input">
              技能组
              <!-- <el-select v-model="maskData.departmentVal" clearable placeholder="请选择">
              <el-option
                v-for="item in maskData.departmentList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
              </el-select>-->
            </span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">工单状态：</span>
            <span class="fl span-input">
              {{maskData.workOrderStatusVal}}
              <!-- <el-select v-model="maskData.workOrderStatusVal" clearable placeholder="请选择">
              <el-option
                v-for="item in maskData.workOrderStatusList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
              </el-select>-->
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl" title="可办分期金额">可办分期金额：</span>
            <span class="fl span-input span-procedures">
              <!-- <el-input placeholder="请输入内容" v-model="maskData.installmentAmount" @input="FnInstallmentAmounInput"  @focus="FnInstallmentAmountTips(1)" @blur="FnInstallmentAmountTips(0)"></el-input> -->
              <!-- {{maskData.installmentAmount}} -->
              <el-input type="number" placeholder="请输入内容" @mousewheel.native.prevent v-model="maskData.installmentAmount"></el-input>
              <!-- <p class="procedures beyond-hiding" ref="installmentAmountTips">总手续费:<i class="color-danger">{{serviceCharge.all}}</i>&nbsp;&nbsp;&nbsp;&nbsp;每期（月）手续费:<i class="color-danger">{{serviceCharge.month}}</i>&nbsp;&nbsp;&nbsp;&nbsp;每期（月）应还款金额:<i class="color-danger">{{serviceCharge.monthMoney}}</i>&nbsp;&nbsp;&nbsp;&nbsp;每期（月）应还本金:<i class="color-danger">{{serviceCharge.principal}}</i></! -->
            </span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">分期期数：</span>
            <span class="fl span-input">
              <!-- {{maskData.installmentNum}} -->
              <el-select v-model="maskData.initiatorMonth" placeholder="请选择">
                <el-option v-for="item in maskData.installmentNumList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">最后还款日：</span>
            <span class="fl span-input">
              {{maskData.lastRepayDay}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.lastRepayDay"></el-input> -->
            </span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">做过分期：</span>
            <span class="fl span-input">
              <!-- <i v-if="maskData.isInitiator==1">是</i>
              <i v-else-if="maskData.isByStages==2">是</i>-->
              <el-radio v-model="maskData.isInitiator" :label="1">是</el-radio>
              <el-radio v-model="maskData.isInitiator" :label="0">否</el-radio>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">修改备注：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入内容" v-model="maskData.orderRemark"></el-input>
            </span>
          </div>
          <!-- <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            处理进度：
          </span>
          <span class="fl span-input">
            <el-input placeholder="请输入内容" v-model="maskData.processingProgress"></el-input>
          </span>
          </div>-->
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">紧急程度：</span>
            <span class="fl span-input">
              <!-- {{maskData.emergencyLevelVal}} -->
              <el-select v-model="maskData.emergencyLevelVal" clearable placeholder="请选择">
                <el-option v-for="item in maskData.emergencyLevelList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">备注：</span>
            <span class="fl span-input" :title="maskData.remarks">
              {{maskData.remarks}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.remarks"></el-input> -->
            </span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">证件号码：</span>
            <span class="fl span-input" :title="maskData.personalCard">
              {{maskData.personalCard}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.remarks"></el-input> -->
            </span>
          </div>

          <!-- <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            <i class="color-danger">*手续费：</i>
          </span>
          <span class="fl span-input">
            <el-input placeholder="请输入内容" v-model="maskData.remarks"></el-input>
          </span>
          </div>-->
        </div>
      </div>

      <div class="content generate-work-order quality-handle business-processing" v-if="maskData.businessProcessing">
        <!-- 业务处理 -->
        <div class="row clearfix row-processing-records">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">客户姓名：</span>
            <span class="fl span-input">{{maskData.customerName}}</span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">性别：</span>
            <span class="fl span-input">
              <i v-if="maskData.sex==0">男</i>
              <i v-if="maskData.sex==1">女</i>
            </span>
          </div>
          <div class="row-item clearfix fl processing-records">
            <span class="row-item-title fl">处理记录：</span>
            <span class="fl border-line">
              <!-- <p>工单处理记录：</p>
            <ul>
              <li v-for="(item,index) in maskData.orderRecords" :key="index">{{index+1}}、{{item}}</li>
              </ul>-->
              <p>质检处理记录：</p>
              <ul>
                <li v-for="(item,index) in maskData.qualityRecords" :key="index">{{index+1}}、{{item}}</li>
              </ul>
              <!-- <p>业务处理记录：</p>
            <ul>
              <li v-for="(item,index) in maskData.businessRecords" :key="index">{{index+1}}、{{item}}</li>
              </ul>-->
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">手机号码：</span>
            <span class="fl span-input">
              {{maskData.phoneNumber}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.phoneNumber"></el-input> -->
            </span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">电话：</span>
            <span class="fl span-input">{{maskData.telephone}}</span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">登记人工号：</span>
            <span class="fl span-input">{{maskData.orderWorkName}}</span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">登记人姓名：</span>
            <span class="fl span-input">{{maskData.orderWorkNumber}}</span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">客户卡号：</span>
            <span class="fl span-input">{{maskData.cardNo}}</span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">工单编号：</span>
            <span class="fl span-input">{{maskData.orderNo}}</span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">业务类型：</span>
            <span class="fl span-input">{{maskData.businessTypeValText}}</span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">下单时间：</span>
            <span class="fl span-input">
              {{maskData.orderTime}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.orderTime"></el-input> -->
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <!-- <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            工单接收组：
          </span>
          <span class="fl span-input">
            管理员
          </span>
          </div>-->
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">质检结果：</span>
            <span class="fl span-input">
              <el-select v-model="maskData.qualityStatus" clearable placeholder="请选择">
                <el-option v-for="item in maskData.qualityHandleList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">通话时间：</span>
            <span class="fl span-input" :title="maskData.callDuration">{{maskData.callDuration}}s</span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl" title="可办分期金额">可办分期金额：</span>
            <span class="fl span-input span-procedures">
              <el-input placeholder="请输入内容" v-model="maskData.installmentAmount" @input="FnInstallmentAmounInput" @focus="FnInstallmentAmountTips(1)" @blur="FnInstallmentAmountTips(0)"></el-input>
              <!-- <el-input placeholder="请输入内容" v-model="maskData.installmentAmount"></el-input> -->
              <!-- <p class="procedures beyond-hiding" ref="installmentAmountTips">
              总手续费:<i class="color-danger">{{serviceCharge.all}}</i>&nbsp;&nbsp;&nbsp;&nbsp;
              每期（月）手续费:<i class="color-danger">{{serviceCharge.month}}</i>&nbsp;&nbsp;&nbsp;&nbsp;
              每期（月）应还款金额:<i class="color-danger">{{serviceCharge.monthMoney}}</i>&nbsp;&nbsp;&nbsp;&nbsp;
              每期（月）应还本金:<i class="color-danger">{{serviceCharge.principal}}</i>
              </p>-->
            </span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">分期期数：</span>
            <span class="fl span-input">
              <el-select v-model="maskData.installmentNum" placeholder="请选择">
                <el-option v-for="item in maskData.installmentNumList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">最后还款日：</span>
            <span class="fl span-input">
              {{maskData.finalPaymentDate}}
              <!-- <el-date-picker
              v-model="maskData.finalPaymentDate"
              type="datetime"
              placeholder="选择日期时间">
              </el-date-picker>-->
            </span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">做过分期：</span>
            <span class="fl span-input">
              <!-- <i v-if="maskData.isByStages==1">是</i>
              <i v-else-if="maskData.isByStages==0">否</i>-->
              <el-radio v-model="maskData.isByStages" :label="1">是</el-radio>
              <el-radio v-model="maskData.isByStages" :label="0">否</el-radio>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">紧急程度：</span>
            <span class="fl span-input">
              <el-select v-model="maskData.emergencyLevelVal" placeholder="请选择">
                <el-option v-for="item in maskData.emergencyLeveList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">备注：</span>
            <span class="fl span-input" :title="maskData.remarks">
              <el-input placeholder="请输入内容" v-model="maskData.remarks"></el-input>
            </span>
          </div>
          <!-- <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            <i class="color-danger">*手续费：</i>
          </span>
          <span class="fl span-input">
            <el-input placeholder="请输入内容" v-model="maskData.remarks"></el-input>
          </span>
          </div>-->
        </div>
      </div>

      <div class="content generate-work-order quality-handle" v-if="maskData.qualityHandle">
        <!-- 质检处理 -->
        <div class="row clearfix row-processing-records">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">客户姓名：</span>
            <span class="fl span-input">{{maskData.customerName}}</span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">性别：</span>
            <span class="fl span-input">
              <i v-if="maskData.sex==0">男</i>
              <i v-if="maskData.sex==1">女</i>
              <!-- <el-radio v-model="maskData.sex" :label="0">男</el-radio>
              <el-radio v-model="maskData.sex" :label="1">女</el-radio>-->
            </span>
          </div>
          <div class="row-item clearfix fl processing-records">
            <span class="row-item-title fl">处理记录：</span>
            <span class="fl border-line">
              <!-- <p>工单处理记录：</p>
            <ul>
              <li v-for="(item,index) in maskData.orderRecords" :key="index">{{index+1}}、{{item}}</li>
              </ul>-->
              <p>质检处理记录：</p>
              <ul>
                <li v-for="(item,index) in maskData.qualityRecords" :key="index">{{index+1}}、{{item}}</li>
              </ul>
              <!-- <p>业务处理记录：</p>
            <ul>
              <li v-for="(item,index) in maskData.businessRecords" :key="index">{{index+1}}、{{item}}</li>
              </ul>-->
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">手机号码：</span>
            <span class="fl span-input">
              {{maskData.phoneNumber}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.phoneNumber"></el-input> -->
            </span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">电话：</span>
            <span class="fl span-input">
              {{maskData.telephone}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.telephone"></el-input> -->
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">登记人工号：</span>
            <span class="fl span-input">{{maskData.orderWorkName}}</span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">登记人姓名：</span>
            <span class="fl span-input">
              {{maskData.orderWorkNumber}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.jobName"></el-input> -->
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">客户卡号：</span>
            <span class="fl span-input">
              {{maskData.cardNo}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.customerCard"></!-->
            </span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">工单编号：</span>
            <span class="fl span-input">
              {{maskData.orderNo}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.orderNo"></el-input> -->
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">业务类型：</span>
            <span class="fl span-input">{{maskData.businessTypeValText}}</span>
            <!-- <span class="fl span-input">
            <el-select v-model="maskData.businessTypeVal" clearable placeholder="请选择">
              <el-option
                v-for="item in maskData.businessType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            </span>-->
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">下单时间：</span>
            <span class="fl span-input">
              {{maskData.orderTime}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.orderTime"></el-input> -->
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">工单接收组：</span>
            <span class="fl span-input">
              管理员
              <!-- <el-select v-model="maskData.departmentVal" clearable placeholder="请选择">
              <el-option
                v-for="item in maskData.departmentList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
              </el-select>-->
            </span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">质检结果：</span>
            <span class="fl span-input">
              <el-select v-model="maskData.qualityHandleVal" clearable placeholder="请选择">
                <el-option v-for="item in maskData.qualityHandleList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl" title="可办分期金额">可办分期金额：</span>
            <span class="fl span-input span-procedures">
              <!-- <el-input placeholder="请输入内容" v-model="maskData.installmentAmount" @input="FnInstallmentAmounInput"  @focus="FnInstallmentAmountTips(1)" @blur="FnInstallmentAmountTips(0)"></el-input> -->
              {{maskData.installmentAmount}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.installmentAmount"></el-input> -->
              <!-- <p class="procedures beyond-hiding" ref="installmentAmountTips">总手续费:<i class="color-danger">{{serviceCharge.all}}</i>&nbsp;&nbsp;&nbsp;&nbsp;每期（月）手续费:<i class="color-danger">{{serviceCharge.month}}</i>&nbsp;&nbsp;&nbsp;&nbsp;每期（月）应还款金额:<i class="color-danger">{{serviceCharge.monthMoney}}</i>&nbsp;&nbsp;&nbsp;&nbsp;每期（月）应还本金:<i class="color-danger">{{serviceCharge.principal}}</i></!-->
            </span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">分期期数：</span>
            <span class="fl span-input">
              {{maskData.installmentNum}}
              <!-- <el-select v-model="maskData.installmentNum" placeholder="请选择"> 
              <el-option
                v-for="item in maskData.installmentNumList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
              </el-select>-->
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">最后还款日：</span>
            <span class="fl span-input">
              {{maskData.finalPaymentDate}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.finalPaymentDate"></el-input> -->
            </span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">做过分期：</span>
            <span class="fl span-input">
              <i v-if="maskData.isByStages==1">是</i>
              <i v-else-if="maskData.isByStages==0">否</i>
              <!-- <el-radio v-model="maskData.isByStages" label="1" v-if="maskData.isByStages==1">是</el-radio>
              <el-radio v-model="maskData.isByStages" label="2" v-if="maskData.isByStages==1">否</el-radio>-->
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">质检处理备注：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入内容" v-model="maskData.qualityRemark"></el-input>
            </span>
          </div>
          <!-- <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            处理进度：
          </span>
          <span class="fl span-input">
            <el-input placeholder="请输入内容" v-model="maskData.processingProgress"></el-input>
          </span>
          </div>-->
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">紧急程度：</span>
            <span class="fl span-input">
              {{maskData.emergencyLevelVal}}
              <!-- <el-select v-model="maskData.emergencyLevelVal" clearable placeholder="请选择">
              <el-option
                v-for="item in maskData.emergencyLevelList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
              </el-select>-->
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">备注：</span>
            <span class="fl span-input" :title="maskData.remarks">
              {{maskData.remarks}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.remarks"></el-input> -->
            </span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">通话时间：</span>
            <span class="fl span-input" :title="maskData.callDuration">
              {{maskData.callDuration}}s
              <!-- <el-input placeholder="请输入内容" v-model="maskData.remarks"></el-input> -->
            </span>
          </div>

          <!-- <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            <i class="color-danger">*手续费：</i>
          </span>
          <span class="fl span-input">
            <el-input placeholder="请输入内容" v-model="maskData.remarks"></el-input>
          </span>
          </div>-->
        </div>
      </div>

      <div class="content generate-work-order quality-handle" v-if="maskData.handleBusiness">
        <!-- 办理业务处理 -->
        <div class="row clearfix row-processing-records">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">客户姓名：</span>
            <span class="fl span-input">{{maskData.customerName}}</span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">性别：</span>
            <span class="fl span-input">
              <i v-if="maskData.sex==0">男</i>
              <i v-if="maskData.sex==1">女</i>
              <!-- <el-radio v-model="maskData.sex" :label="0">男</el-radio>
              <el-radio v-model="maskData.sex" :label="1">女</el-radio>-->
            </span>
          </div>
          <div class="row-item clearfix fl processing-records">
            <span class="row-item-title fl">处理记录：</span>
            <span class="fl border-line">
              <p>工单处理记录：</p>
              <ul>
                <li v-for="(item,index) in maskData.orderRecords" :key="index">{{index+1}}、{{item}}</li>
              </ul>
              <p>质检处理记录：</p>
              <ul>
                <li v-for="(item,index) in maskData.qualityRecords" :key="index">{{index+1}}、{{item}}</li>
              </ul>
              <p>业务处理记录：</p>
              <ul>
                <li v-for="(item,index) in maskData.businessRecords" :key="index">{{index+1}}、{{item}}</li>
              </ul>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">手机号码：</span>
            <span class="fl span-input">
              {{maskData.phoneNumber}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.phoneNumber"></el-input> -->
            </span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">电话：</span>
            <span class="fl span-input">
              {{maskData.telephone}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.telephone"></el-input> -->
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">登记人工号：</span>
            <span class="fl span-input">{{maskData.orderWorkName}}</span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">登记人姓名：</span>
            <span class="fl span-input">
              {{maskData.orderWorkNumber}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.jobName"></el-input> -->
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">客户卡号：</span>
            <span class="fl span-input">
              {{maskData.cardNo}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.customerCard"></!-->
            </span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">工单编号：</span>
            <span class="fl span-input">
              {{maskData.orderNo}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.orderNo"></el-input> -->
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">业务类型：</span>
            <span class="fl span-input">{{maskData.businessTypeValText}}</span>
            <!-- <span class="fl span-input">
            <el-select v-model="maskData.businessTypeVal" clearable placeholder="请选择">
              <el-option
                v-for="item in maskData.businessType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            </span>-->
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">下单时间：</span>
            <span class="fl span-input">
              {{maskData.orderTime}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.orderTime"></el-input> -->
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">工单接收组：</span>
            <span class="fl span-input">
              技能组
              <!-- <el-select v-model="maskData.departmentVal" clearable placeholder="请选择">
              <el-option
                v-for="item in maskData.departmentList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
              </el-select>-->
            </span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">办理业务结果：</span>
            <span class="fl span-input">
              <el-select v-model="maskData.qualityHandleVal" clearable placeholder="请选择">
                <el-option v-for="item in maskData.qualityHandleList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl" title="可办分期金额">可办分期金额：</span>
            <span class="fl span-input span-procedures">
              <!-- <el-input placeholder="请输入内容" v-model="maskData.installmentAmount" @input="FnInstallmentAmounInput"  @focus="FnInstallmentAmountTips(1)" @blur="FnInstallmentAmountTips(0)"></el-input> -->
              {{maskData.installmentAmount}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.installmentAmount"></el-input> -->
              <!-- <p class="procedures beyond-hiding" ref="installmentAmountTips">总手续费:<i class="color-danger">{{serviceCharge.all}}</i>&nbsp;&nbsp;&nbsp;&nbsp;每期（月）手续费:<i class="color-danger">{{serviceCharge.month}}</i>&nbsp;&nbsp;&nbsp;&nbsp;每期（月）应还款金额:<i class="color-danger">{{serviceCharge.monthMoney}}</i>&nbsp;&nbsp;&nbsp;&nbsp;每期（月）应还本金:<i class="color-danger">{{serviceCharge.principal}}</i></!-->
            </span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">分期期数：</span>
            <span class="fl span-input">
              {{maskData.installmentNum}}
              <!-- <el-select v-model="maskData.installmentNum" placeholder="请选择"> 
              <el-option
                v-for="item in maskData.installmentNumList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
              </el-select>-->
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">最后还款日：</span>
            <span class="fl span-input">
              {{maskData.finalPaymentDate}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.finalPaymentDate"></el-input> -->
            </span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">做过分期：</span>
            <span class="fl span-input">
              <i v-if="maskData.isByStages==1">是</i>
              <i v-else-if="maskData.isByStages==2">是</i>
              <!-- <el-radio v-model="maskData.isByStages" label="1" v-if="maskData.isByStages==1">是</el-radio>
              <el-radio v-model="maskData.isByStages" label="2" v-if="maskData.isByStages==1">否</el-radio>-->
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">办理业务处理备注：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入内容" v-model="maskData.qualityRemark"></el-input>
            </span>
          </div>
          <!-- <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            处理进度：
          </span>
          <span class="fl span-input">
            <el-input placeholder="请输入内容" v-model="maskData.processingProgress"></el-input>
          </span>
          </div>-->
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">紧急程度：</span>
            <span class="fl span-input">
              {{maskData.emergencyLevelVal}}
              <!-- <el-select v-model="maskData.emergencyLevelVal" clearable placeholder="请选择">
              <el-option
                v-for="item in maskData.emergencyLevelList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
              </el-select>-->
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">备注：</span>
            <span class="fl span-input" :title="maskData.remarks">
              {{maskData.remarks}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.remarks"></el-input> -->
            </span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">通话时间：</span>
            <span class="fl span-input" :title="maskData.callDuration">
              {{maskData.callDuration}}
              <!-- <el-input placeholder="请输入内容" v-model="maskData.remarks"></el-input> -->
            </span>
          </div>

          <!-- <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            <i class="color-danger">*手续费：</i>
          </span>
          <span class="fl span-input">
            <el-input placeholder="请输入内容" v-model="maskData.remarks"></el-input>
          </span>
          </div>-->
        </div>
      </div>
      <!-- 生成工单 -->
      <div class="content add-work-order generate-work-order" v-if="maskData.addWorkOrder">
        <div class="row clearfix row-processing-records">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">日期：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入内容" disabled v-model="maskData.createdTime"></el-input>
            </span>
          </div>
        </div>
        <div class="row clearfix row-processing-records">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">登记人：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入内容" disabled v-model="maskData.handlePerson"></el-input>
            </span>
            <!-- <span class="fl span-input">{{maskData.handlePerson}}</span> -->
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">电话号码：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入内容" type="number" @mousewheel.native.prevent v-model="maskData.phoneNum"></el-input>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">客户姓名：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入内容" v-model="maskData.clientName"></el-input>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">ESN编号/订单编号：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入内容" type="number" @mousewheel.native.prevent v-model="maskData.esnOrderNo"></el-input>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">工单分类：</span>
            <span class="fl span-input">
              <el-cascader v-model="maskData.jobClassification" :options="maskData.jobClassificationList" :props="{ checkStrictly: true,label:'label',value:'label' }" @change="handleChange"></el-cascader>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">城市地区：</span>
            <span class="fl span-input">
              <el-cascader v-model="maskData.cityarea" :options="maskData.CityareaList" :props="{ checkStrictly: true,label:'pcaName',value:'pcaName',children:'sysPcaList' }" @change="handleChange"></el-cascader>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">工单类型：</span>
            <span class="fl span-input">
              <el-select v-model="maskData.workOderType" placeholder="请选择">
                <el-option v-for="item in maskData.workOderTypeList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">工单内容：</span>
            <span class="fl span-input">
              <textarea class="row-item-textarea mb15" v-model.trim="maskData.orderContent"></textarea>
              <!-- <el-input placeholder="请输入内容" v-model="maskData.orderContent"></el-input> -->
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">备注：</span>
            <span class="fl span-input">
              <textarea class="row-item-textarea mb15" v-model.trim="maskData.remark"></textarea>
              <!-- <el-input placeholder="请输入内容" v-model="maskData.remark"></el-input> -->
            </span>
          </div>
        </div>
      </div>

      <div class="content task-details" v-if="maskData.taskDetails">
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">质检姓名：</span>
            <span class="fl span-only-show">{{maskData.qualityName}}</span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">质检工号：</span>
            <span class="fl span-only-show">{{maskData.qualityNum}}</span>
          </div>
        </div>
        <!-- <div class="row clearfix">
        <div class="row-item fl clearfix">
          <span class="row-item-title fl">
          客服姓名：
          </span>
          <span class="fl span-only-show">
            {{maskData.customerName}}
          </span>
        </div>
        <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            客服工号：
          </span>
          <span class="fl span-only-show">
            {{maskData.customerServiceNumber}}
          </span>
        </div>
        </div>-->
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">年龄：</span>
            <span class="fl span-only-show">{{maskData.age}}</span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">通话时长：</span>
            <span class="fl span-only-show">{{maskData.talkTime}}</span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">下单时间：</span>
            <span class="fl span-only-show">{{maskData.orderTime}}</span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">客户卡号：</span>
            <span class="fl span-only-show">{{maskData.customerCardNumber}}</span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">业务类型：</span>
            <span class="fl span-only-show">{{maskData.businessType}}</span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">证件号码：</span>
            <span class="fl span-only-show">{{maskData.personalCard}}</span>
          </div>
        </div>
      </div>
      <div class="content details" v-if="maskData.details">
        <!-- 详情 -->
        <div class="row clearfix" style="color: #333; font-size: 16px; font-weight: bold">记录详情</div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">客户名称：</span>
            <span class="fl span-only-show">{{maskData.name}}</span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">手机号码：</span>
            <span class="fl span-only-show">{{maskData.mobile}}</span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">证件号码：</span>
            <span class="fl span-only-show">{{maskData.identificationNumber}}</span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl" title="最后还款日">最后还款日：</span>
            <span class="fl span-only-show">{{maskData.finalPaymentDate}}</span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">卡号：</span>
            <span class="fl span-only-show">{{maskData.cardNumber}}</span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">客户单位：</span>
            <span class="fl span-only-show">{{maskData.customerUnit}}</span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">年龄：</span>
            <span class="fl span-only-show">{{maskData.age}}</span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">性别：</span>
            <span class="fl span-only-show">{{maskData.sex}}</span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">客户意向：</span>
            <span class="fl span-only-show">{{maskData.customerIntention}}</span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">导入批次：</span>
            <span class="fl span-only-show">{{maskData.batch}}</span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">接触结果：</span>
            <span class="fl span-only-show">{{maskData.result}}</span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl">创建时间：</span>
            <span class="fl span-only-show">{{maskData.contactTime}}</span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item fl clearfix">
            <span class="row-item-title fl" title="最高可办分期额度">最高可办分期额度：</span>
            <span class="fl span-only-show">{{maskData.maximumAvailableQuota}}</span>
          </div>
          <div class="row-item fl clearfix">
            <span class="row-item-title fl" title="额度有效期">额度有效期：</span>
            <span class="fl span-only-show">{{maskData.validityPeriodQuota}}</span>
          </div>
        </div>
        <div class="row clearfix" style="color: #333; font-size: 16px; font-weight: bold">工单详情</div>
        <template v-if="!maskData.details2">没有工单详情</template>
        <template v-if="maskData.details2">
          <div class="row clearfix row-processing-records">
            <div class="row-item clearfix fl">
              <span class="row-item-title fl">客户姓名：</span>
              <span class="fl span-input">{{maskData.customerName}}</span>
            </div>
            <div class="row-item clearfix fl">
              <span class="row-item-title fl">性别：</span>
              <span class="fl span-input">
                <i v-if="maskData.sex1==0">男</i>
                <i v-if="maskData.sex1==1">女</i>
                <!-- <el-radio v-model="maskData.sex" :label="0">男</el-radio>
                <el-radio v-model="maskData.sex" :label="1">女</el-radio>-->
              </span>
            </div>
            <div class="row-item clearfix fl processing-records">
              <span class="row-item-title fl">处理记录：</span>
              <span class="fl border-line">
                <!-- <p>工单处理记录：</p>
              <ul>
                <li v-for="(item,index) in maskData.orderRecords" :key="index">{{index+1}}、{{item}}</li>
                </ul>-->
                <p>质检处理记录：</p>
                <ul>
                  <li v-for="(item,index) in maskData.qualityRecords" :key="index">{{index+1}}、{{item}}</li>
                </ul>
                <!-- <p>业务处理记录：</p>
              <ul>
                <li v-for="(item,index) in maskData.businessRecords" :key="index">{{index+1}}、{{item}}</li>
                </ul>-->
              </span>
            </div>
          </div>
          <div class="row clearfix">
            <div class="row-item fl clearfix">
              <span class="row-item-title fl">手机号码：</span>
              <span class="fl span-input">
                {{maskData.phoneNumber}}
                <!-- <el-input placeholder="请输入内容" v-model="maskData.phoneNumber"></el-input> -->
              </span>
            </div>
            <div class="row-item fl clearfix">
              <span class="row-item-title fl">电话：</span>
              <span class="fl span-input">
                {{maskData.telephone}}
                <!-- <el-input placeholder="请输入内容" v-model="maskData.telephone"></el-input> -->
              </span>
            </div>
          </div>
          <div class="row clearfix">
            <div class="row-item fl clearfix">
              <span class="row-item-title fl">登记人工号：</span>
              <span class="fl span-input">{{maskData.orderWorkName}}</span>
            </div>
            <div class="row-item fl clearfix">
              <span class="row-item-title fl">登记人姓名：</span>
              <span class="fl span-input">
                {{maskData.orderWorkNumber}}
                <!-- <el-input placeholder="请输入内容" v-model="maskData.jobName"></el-input> -->
              </span>
            </div>
          </div>
          <div class="row clearfix">
            <div class="row-item fl clearfix">
              <span class="row-item-title fl">客户卡号：</span>
              <span class="fl span-input">
                {{maskData.cardNo}}
                <!-- <el-input placeholder="请输入内容" v-model="maskData.customerCard"></!-->
              </span>
            </div>
            <div class="row-item fl clearfix">
              <span class="row-item-title fl">工单编号：</span>
              <span class="fl span-input">
                {{maskData.orderNo}}
                <!-- <el-input placeholder="请输入内容" v-model="maskData.orderNo"></el-input> -->
              </span>
            </div>
          </div>
          <div class="row clearfix">
            <div class="row-item fl clearfix">
              <span class="row-item-title fl">业务类型：</span>
              <span class="fl span-input">{{maskData.businessTypeValText}}</span>
              <!-- <span class="fl span-input">
              <el-select v-model="maskData.businessTypeVal" clearable placeholder="请选择">
                <el-option
                  v-for="item in maskData.businessType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              </span>-->
            </div>
            <div class="row-item fl clearfix">
              <span class="row-item-title fl">下单时间：</span>
              <span class="fl span-input">
                {{maskData.orderTime}}
                <!-- <el-input placeholder="请输入内容" v-model="maskData.orderTime"></el-input> -->
              </span>
            </div>
          </div>
          <div class="row clearfix">
            <div class="row-item fl clearfix">
              <span class="row-item-title fl">工单接收组：</span>
              <span class="fl span-input">
                管理员
                <!-- <el-select v-model="maskData.departmentVal" clearable placeholder="请选择">
                <el-option
                  v-for="item in maskData.departmentList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
                </el-select>-->
              </span>
            </div>
            <div class="row-item fl clearfix">
              <span class="row-item-title fl">紧急程度：</span>
              <span class="fl span-input">
                {{maskData.emergencyLevelVal}}
                <!-- <el-select v-model="maskData.emergencyLevelVal" clearable placeholder="请选择">
                <el-option
                  v-for="item in maskData.emergencyLevelList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
                </el-select>-->
              </span>
            </div>
          </div>
          <div class="row clearfix">
            <div class="row-item fl clearfix">
              <span class="row-item-title fl" title="可办分期金额">可办分期金额：</span>
              <span class="fl span-input span-procedures">
                <!-- <el-input placeholder="请输入内容" v-model="maskData.installmentAmount" @input="FnInstallmentAmounInput"  @focus="FnInstallmentAmountTips(1)" @blur="FnInstallmentAmountTips(0)"></el-input> -->
                {{maskData.installmentAmount}}
                <!-- <el-input placeholder="请输入内容" v-model="maskData.installmentAmount"></el-input> -->
                <!-- <p class="procedures beyond-hiding" ref="installmentAmountTips">总手续费:<i class="color-danger">{{serviceCharge.all}}</i>&nbsp;&nbsp;&nbsp;&nbsp;每期（月）手续费:<i class="color-danger">{{serviceCharge.month}}</i>&nbsp;&nbsp;&nbsp;&nbsp;每期（月）应还款金额:<i class="color-danger">{{serviceCharge.monthMoney}}</i>&nbsp;&nbsp;&nbsp;&nbsp;每期（月）应还本金:<i class="color-danger">{{serviceCharge.principal}}</i></!-->
              </span>
            </div>
            <div class="row-item fl clearfix">
              <span class="row-item-title fl">分期期数：</span>
              <span class="fl span-input">
                {{maskData.installmentNum}}
                <!-- <el-select v-model="maskData.installmentNum" placeholder="请选择"> 
                <el-option
                  v-for="item in maskData.installmentNumList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
                </el-select>-->
              </span>
            </div>
          </div>
          <div class="row clearfix">
            <div class="row-item fl clearfix">
              <span class="row-item-title fl">最后还款日：</span>
              <span class="fl span-input">
                {{maskData.finalPaymentDate}}
                <!-- <el-input placeholder="请输入内容" v-model="maskData.finalPaymentDate"></el-input> -->
              </span>
            </div>
            <div class="row-item fl clearfix">
              <span class="row-item-title fl">做过分期：</span>
              <span class="fl span-input">
                <i v-if="maskData.isByStages==1">是</i>
                <i v-else-if="maskData.isByStages==0">否</i>
                <!-- <el-radio v-model="maskData.isByStages" label="1" v-if="maskData.isByStages==1">是</el-radio>
                <el-radio v-model="maskData.isByStages" label="2" v-if="maskData.isByStages==1">否</el-radio>-->
              </span>
            </div>
          </div>
          <div class="row clearfix">
            <div class="row-item fl clearfix">
              <span class="row-item-title fl">备注：</span>
              <span class="fl span-input" :title="maskData.remarks">
                {{maskData.remarks}}
                <!-- <el-input placeholder="请输入内容" v-model="maskData.remarks"></el-input> -->
              </span>
            </div>
            <div class="row-item fl clearfix">
              <span class="row-item-title fl">通话时间：</span>
              <span class="fl span-input" :title="maskData.callDuration">
                {{maskData.callDuration}}s
                <!-- <el-input placeholder="请输入内容" v-model="maskData.remarks"></el-input> -->
              </span>
            </div>

            <!-- <div class="row-item fl clearfix">
            <span class="row-item-title fl">
              <i class="color-danger">*手续费：</i>
            </span>
            <span class="fl span-input">
              <el-input placeholder="请输入内容" v-model="maskData.remarks"></el-input>
            </span>
            </div>-->
          </div>
          <div class="row clearfix">
            <div class="row-item fl clearfix">
              <span class="row-item-title fl">管理员备注：</span>
              <span class="fl span-input" :title="maskData.adminRemark">
                {{maskData.adminRemark}}
                <!-- <el-input placeholder="请输入内容" v-model="maskData.remarks"></el-input> -->
              </span>
            </div>
          </div>
        </template>
      </div>

      <div class="content audio-box" v-if="maskData.audio">
        <!-- 调听录音 -->
        <div class="row">
          <p>当前调听方式：flash player</p>
        </div>
        <div class="row">
          <div class="row-audio">
            <audio :src="maskData.audio" autoplay="autoplay" controls="controls"></audio>
          </div>
        </div>
        <div class="row">
          <p class="fs12">
            提示：如果不能正常调听，请尝试
            <span class="default-color">windows media player / real player</span>
          </p>
        </div>
        <!-- <div class="row audio-details clearfix">
        <div class="row-item fl">
          <span>呼叫坐席：</span>
          <span>{{maskData.seat}}</span>
        </div>
        <div class="row-item row-item-r fl">
          <span>对方姓名：</span>
          <span>{{maskData.name}}</span>
        </div>
        <div class="row-item fl">
          <span>通话起始时间：</span>
          <span>{{maskData.callStartTime}}</span>
        </div>
        <div class="row-item row-item-r fl">
          <span>通话时长：</span>
          <span>{{maskData.callDuration}}</span>
        </div>
        <div class="row-item fl mb0">
          <span>详情：</span>
          <span>{{maskData.callRecord}}</span>
        </div>
        </div>-->
      </div>

      <div class="content change-password" v-if="maskData.changePassWordBox">
        <div class="row clearfix">
          <div class="row-item clearfix">
            <span class="row-item-title fl">旧密码：</span>
            <span class="fl">
              <el-input placeholder="请输入内容" type="password" v-model.trim="maskData.oldPassWord"></el-input>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item clearfix">
            <span class="row-item-title fl">新密码：</span>
            <span class="fl">
              <el-input placeholder="请输入内容" type="password" v-model.trim="maskData.newPassWord"></el-input>
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item clearfix">
            <span class="row-item-title fl">确认新密码：</span>
            <span class="fl">
              <el-input placeholder="请输入内容" type="password" v-model.trim="maskData.newPassWordAgain"></el-input>
            </span>
          </div>
        </div>
      </div>
      <!-- 管理员修改密码 -->
      <div class="content change-password" v-if="maskData.adminChangePassWordBox">
        <div class="row clearfix">
          <div class="row-item clearfix">
            <span class="row-item-title fl">工号：</span>
            <span class="fl">
              {{maskData.orderNo}}
            </span>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item clearfix">
            <span class="row-item-title fl">新密码：</span>
            <span class="fl">
              <el-input placeholder="请输入内容" type="password" v-model.trim="maskData.newPassWord"></el-input>
            </span>
          </div>
        </div>

        <div class="row clearfix">
          <div class="row-item clearfix">
            <span class="row-item-title fl">确认新密码：</span>
            <span class="fl">
              <el-input placeholder="请输入内容" type="password" v-model.trim="maskData.newPassWordAgain"></el-input>
            </span>
          </div>
        </div>
      </div>

      <!-- <div class="content" v-if="maskData.delete">
      <div class="row">
        确定删除吗？
      </div>
      </div>-->
      <div class="content" v-if="maskData.batchWithdraw">
        <div class="row">确定撤回相关客户吗？</div>
      </div>
      <div class="content" v-if="maskData.qualityStatusBox">
        <div class="row">修改质检状态</div>
      </div>
      <div class="content customer-template-edit" v-if="maskData.fieldNameBox">
        <!-- 客户模板的修改自定义字段 -->
        <div class="row clearfix">
          <span class="row-item-title fl">字段名称：</span>
          <span class="fl">
            <el-input placeholder="请输入内容" v-model="maskData.fieldName"></el-input>
          </span>
        </div>
        <div class="row clearfix">
          <span class="row-item-title fl">是否必填：</span>
          <span class="fl">
            <el-radio v-model="maskData.required" label="1">是</el-radio>
            <el-radio v-model="maskData.required" label="0">否</el-radio>
          </span>
        </div>
        <div class="row clearfix">
          <span class="row-item-title fl">允许修改：</span>
          <span class="fl">
            <el-radio v-model="maskData.editable" label="1">是</el-radio>
            <el-radio v-model="maskData.editable" label="0">否</el-radio>
          </span>
        </div>
        <div class="row clearfix">
          <span class="row-item-title fl">是否筛选：</span>
          <span class="fl">
            <el-radio v-model="maskData.isScreen" label="1">是</el-radio>
            <el-radio v-model="maskData.isScreen" label="0">否</el-radio>
          </span>
        </div>
        <!-- <div class="row clearfix">
        <span class="row-item-title fl">
          类型：
        </span>
        <span class="fl">
          <el-select v-model="maskData.fieldTypeVal" clearable placeholder="请选择">
            <el-option
              v-for="item in maskData.fieldType"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-button type="primary" v-show="maskData.fieldNameBoxAddInput">+</el-button>
        </span>
        </div>-->
        <div class="row clearfix field-name-box-add-input" v-show="maskData.fieldNameBoxAddInput">
          <div>
            <span class="row-item-title fl"></span>
            <span class="fl span-input">
              <el-input placeholder="请输入内容"></el-input>
            </span>
          </div>
        </div>
      </div>

      <div class="content customer-template-edit" v-if="maskData.addFieldNameBox">
        <!-- 客户模板的新增自定义字段 -->
        <div class="row clearfix">
          <span class="row-item-title fl">字段名称：</span>
          <span class="fl">
            <el-input placeholder="请输入内容" v-model="maskData.fieldName"></el-input>
          </span>
        </div>
        <div class="row clearfix">
          <span class="row-item-title fl">是否必填：</span>
          <span class="fl">
            <el-radio v-model="maskData.required" label="1">是</el-radio>
            <el-radio v-model="maskData.required" label="0">否</el-radio>
          </span>
        </div>
        <div class="row clearfix">
          <span class="row-item-title fl">允许修改：</span>
          <span class="fl">
            <el-radio v-model="maskData.editable" label="1">是</el-radio>
            <el-radio v-model="maskData.editable" label="0">否</el-radio>
          </span>
        </div>
        <div class="row clearfix">
          <span class="row-item-title fl">是否筛选：</span>
          <span class="fl">
            <el-radio v-model="maskData.isScreen" label="1">是</el-radio>
            <el-radio v-model="maskData.isScreen" label="0">否</el-radio>
          </span>
        </div>
        <div class="row clearfix">
          <span class="row-item-title fl">类型：</span>
          <span class="fl">
            <el-select v-model="maskData.fieldTypeVal" clearable placeholder="请选择">
              <el-option v-for="item in maskData.fieldType" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-button type="primary" v-show="maskData.fieldNameBoxAddInput" @click="FnMask({type:'addFieldNameBoxInput'})">+</el-button>
          </span>
        </div>
        <div class="row clearfix field-name-box-add-input" v-show="maskData.fieldNameBoxAddInput">
          <div class="clearfix" v-for="(item,index) in maskData.fieldNameBoxAddInputList" :key="item+index">
            <span class="row-item-title fl"></span>
            <span class="fl span-input">
              <el-input placeholder="请输入内容" v-model="item.index"></el-input>
            </span>
          </div>
        </div>
      </div>

      <div class="content" v-if="maskData.transfer">
        <div class="row clearfix">
          <div class="row-item">
            <p>
              您选择的客户共计
              <span class="default-color">{{maskData.selectionListlength}}</span> 个
            </p>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item">
            <p style="color:#ccc">提示：一次最多分配一万个客户，若分配数超过最大值，截取前一万个进行分配</p>
          </div>
        </div>
        <div class="row clearfix">
          <div class="row-item">
            <span class="row-item-title">类型：</span>
            <span class="row-item-select">
              <el-select v-model="maskData.transferVal" clearable placeholder="请选择">
                <el-option v-for="item in maskData.transferList" :key="item.value" :label="item.lable" :value="item.value"></el-option>
              </el-select>
            </span>
          </div>
        </div>
      </div>

      <!--增加修改业务类型弹窗-->
      <div class="content" v-if="maskData.editBusinessType">
        <div class="row clearfix">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">业务名称：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入业务名称" v-model="maskData.dictionaryValue"></el-input>
            </span>
          </div>
        </div>
      </div>

      <!--修改中继号码弹窗-->
      <div class="content" v-if="maskData.Relay">
        <div class="row clearfix">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">中继号码：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入中继号码" v-model="maskData.number"></el-input>
            </span>
          </div>
        </div>
      </div>

      <!--增加修改公司-->
      <div class="content" v-if="maskData.Company">
        <div class="row clearfix">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">公司名称：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入名称" v-model="maskData.companyName"></el-input>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">电话：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入电话" v-model="maskData.telephone"></el-input>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">网址：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入网址" v-model="maskData.website"></el-input>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">邮箱：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入邮箱" v-model="maskData.email"></el-input>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">地址：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入地址" v-model="maskData.address"></el-input>
            </span>
          </div>
        </div>
      </div>

      <!--增加修改部门-->
      <div class="content" v-if="maskData.Department">
        <div class="row clearfix">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">部门名称：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入名称" v-model="maskData.departmentName"></el-input>
            </span>
          </div>
        </div>
      </div>

      <!--增加修改用户-->
      <div class="content" v-if="maskData.User">
        <div class="row clearfix">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">工号：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入工号" v-model="maskData.workNumber"></el-input>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">姓名：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入姓名" v-model="maskData.nickName"></el-input>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">密码：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入密码" type="password" v-model="maskData.password"></el-input>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">手机：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入手机" v-model="maskData.mobile"></el-input>
            </span>
          </div>
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">角色列表：</span>
            <span class="fl">
              <el-select v-model="maskData['roles.roleId']" placeholder="请选择">
                <el-option v-for="item in maskData.rolesList" :key="item.roleId" :label="item.roleName" :value="item.roleId"></el-option>
              </el-select>
            </span>
          </div>
        </div>
      </div>

      <!--行管理员弹窗-->
      <!-- <div class="content" v-if="maskData.SeatSecond">
        <div class="row clearfix">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">工号：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入工号" v-model="maskData.workNumber"></el-input>
            </span>
          </div>

          <div class="row-item clearfix fl">
            <span class="row-item-title fl">密码：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入密码" type="password" v-model="maskData.password"></el-input>
            </span>
          </div>

          <div class="row-item clearfix fl">
            <span class="row-item-title fl">姓名：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入姓名" v-model="maskData.nickName"></el-input>
            </span>
          </div>

          <div class="row-item clearfix fl">
            <span class="row-item-title fl">手机：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入手机" v-model="maskData.mobile"></el-input>
            </span>
          </div>

          <div class="row-item clearfix fl">
            <span class="row-item-title fl">行部：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入行部" v-model="maskData.secondAdminName"></el-input>
            </span>
          </div>

          <div class="row-item clearfix fl">
            <span class="row-item-title fl">邮箱：</span>
            <span class="fl span-input">
              <el-input placeholder="请输入邮箱" v-model="maskData.email"></el-input>
            </span>
          </div>
        </div>
      </div> -->

      <!--新增业务类型分期利率-->
      <!-- <div class="content" v-if="maskData.editMoneyRate">
        <div class="row clearfix">
          <div class="row-item clearfix fl">
            <span class="row-item-title fl">分期期数：</span>
            <span class="fl span-input">
              <el-input placeholder="分期期数" v-model="maskData.periodsNumber"></el-input>
            </span>
          </div>

          <div class="row-item clearfix fl">
            <span class="row-item-title fl">分期利率：</span>
            <span class="fl span-input">
              <el-input placeholder="分期利率" v-model="maskData.periodsRate"></el-input>
            </span>
          </div>
        </div>
      </div> -->

      <!--新增业务类型分期利率-->
      <span slot="footer" class="dialog-footer clearfix" v-if="maskData.editMoneyRate">
        <el-button @click="FnMask({type:'cancel'})">取 消</el-button>
        <el-button type="primary" :loading="btnLoading" @click="FnMask({type:'editMoneyRate',content:maskData})">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Axios from "axios";
export default {
  name: "",
  data() {
    return {
      timeStart: new Date(),
      serviceCharge: { rate: "0.005" },
      panleDown: false
    };
  },
  props: {
    showMask: {
      type: Boolean,
      default: false
    },
    maskData: {
      type: Object,
      default: function () {
        return {};
      }
    },
    maskTitle: {
      type: String,
      default: ""
    },
    maskWidth: {
      type: String,
      default: "28%"
    },
    btnLoading: {
      type: Boolean,
      default: false
    }
  },
  created() { },
  mounted() {
    // this.$refs.installmentAmount.focus(()=>{
    //   alert(1)
    // })
  },
  methods: {
    FnInstallmentAmounInput(e) {
      //手续费输入框输入事件
      // this.serviceCharge.all = (e*this.maskData.installmentNum*this.serviceCharge.rate).toFixed(2);// 总手续费=分期金额*分期期数*执行手续费率(%/期)
      // this.serviceCharge.month = ((e*this.serviceCharge.rate)+(e/this.maskData.installmentNum)).toFixed(2)// 每期（月）应还款金额=(分期金额*执行手续费率(%/期))+(分期金额/分期期数)
      // this.serviceCharge.monthMoney = (e/this.maskData.installmentNum).toFixed(2);// 每期（月）应还本金=分期金额/分期期数
      // this.serviceCharge.principal = (e*this.serviceCharge.rate).toFixed(2)// 每期（月）手续费=分期金额*执行手续费率(%/期)

      let one = this.maskData.installmentAmount;
      let two = this.maskData.installmentNum;
      let third = this.maskData.installmentNumList.find(n1 => n1.label == two)
        .value;
      let four = ((one / two) * 1).toFixed(2);
      let five = (one * third * 1).toFixed(2);
      let six = (one * two * third * 1).toFixed(2);
      let seven = four * 1 + five * 1;
      let eight = one * 1 + six * 1;
      this.serviceCharge = { one, two, third, four, five, six, seven, eight };
    },
    FnInstallmentAmountTips(e) {
      //手续费输入框获取焦点事件
      console.log(this.$refs, "this.$refs.installmentAmountTips");
      if (e) {
        //获取焦点
        this.$refs.installmentAmountTips.style.display = "block";
        this.serviceCharge.all =
          e * this.maskData.installmentNum * this.serviceCharge.rate; // 总手续费=分期金额*分期期数*执行手续费率(%/期)
        this.FnInstallmentAmounInput(this.maskData.installmentAmount);
      } else {
        this.$refs.installmentAmountTips.style.display = "none";
      }
    },
    FnFile(e) {
      // console.log(e)
      var name = e.target.files[0].name.substr(
        e.target.files[0].name.lastIndexOf(".") + 1
      );
      var format = ["jpg", "JPG", "GIF", "gif", "JPEG", "jpeg", "PNG", "png"];
      if (format.indexOf(name) == -1) {
        this.$message.error("请选择正确的格式上传");
        return;
      }
      const USER_TOKEN = JSON.parse(sessionStorage.getItem("token"))
        ? JSON.parse(sessionStorage.getItem("token")).obj.token
        : "";
      let config = {
        //添加请求头
        headers: {
          Authorization: JSON.parse(sessionStorage.getItem("token")).obj.token
          // 'Content-Type':'multipart/form-data'
        }
      };
      let param = new FormData();
      param.append("type", "file");
      //通过append向form对象添加数据
      param.append("file", e.target.files[0]);
      Axios.post(`${this.$prefix}/file/upload`, param, config).then(res => {
        // console.log(res,'上传后返回的')
        if (!res) {
          this.$message.error("上传失败");
          return;
        }
        if (res.data.code == 200) {
          this.maskData.headerImg = `${this.$prefix}/${res.data.obj}`;
        } else {
          this.$message.error("上传失败");
        }
      });
    },
    FnMask(obj) {
      this.panleDown = false;
      let timeStart = this.timeStart;
      let timeEnd = new Date();
      if (timeEnd - timeStart >= 1000) {
        if (obj.type == "selectLevel") {
          this.$emit("FnMask", obj);
        } else {
          this.$emit("FnMask", { type: obj.type, content: this.maskData });
        }
        this.timeStart = timeEnd;
      }
    },
    handleChange(a, b, c) {
      // console.log(a, b, c)
    },
    handleClose(done) {
      this.panleDown = false;
      this.$emit("FnMask", { type: "false", content: this.maskData });
    },
    togglePlane() {
      this.panleDown = !this.panleDown;
    },
    FnSizeChange(e) {
      this.$emit("FnMask", { type: "pageNum", content: e });
    },
    handleCurrentChange(e) {
      this.$emit("FnMask", { type: "clickRow", content: e });
    }
  },
  components: {},
  computed: {},

  watch: {
    "maskData.orderDeptId": {
      handler(nv, ov) {
        console.log(nv)
        if (nv == 1) {
          this.maskData.orderStatus = 1
        } else if (nv == 2) {
          this.maskData.orderStatus = 2
        } else if (nv == 3) {
          this.maskData.orderStatus = 2
        } else if (nv == 4) {
          this.maskData.orderStatus = 3
        }

      },
      deep: true
    },
    "maskData.topRegionName": {
      handler(nv, ov) {
        if (nv && nv.length) {
          this.maskData.showTopRegionNameText = {};
        }
      },
      deep: true
    },
    "maskData.regionName": {
      handler(nv, ov) {
        if (nv && nv.length) {
          this.maskData.showRegionNameText = {};
        }
      },
      deep: true
    },
    "maskData.pRegionId": {
      handler(nv, ov) {
        if (nv && nv.length) {
          this.maskData.pRegionIdText = "";
        }
      },
      deep: true
    },
    "maskData.subordinateCatalogueList": {
      handler(nv, ov) {
        // console.log(nv)
      },
      deep: true
    },
    "maskData.fieldTypeVal": {
      handler: function (nv, ov) {
        nv == 6
          ? (this.maskData.fieldNameBoxAddInput = true)
          : (this.maskData.fieldNameBoxAddInput = false);
      },
      deep: true
    },
    "maskData.workOrderStatusVal": {
      handler: function (nv, ov) {
        nv == "order_status_work_fail"
          ? (this.maskData.workOrderBack = true)
          : (this.maskData.workOrderBack = false);
      },
      deep: true
    },
    "maskData.installmentNum": {
      handler: function (nv, ov) {
        switch (nv) {
          case "3":
            this.serviceCharge.rate = "0.0075";
            break;
          case "6":
            this.serviceCharge.rate = "0.0056";
            break;
          case "10":
            this.serviceCharge.rate = "0.0052";
            break;
          case "12":
            this.serviceCharge.rate = "0.0048";
            break;
          case "18":
            this.serviceCharge.rate = "0.0048";
            break;
          case "24":
            this.serviceCharge.rate = "0.0050";
            break;
          default:
            this.serviceCharge.rate = "0.50";
        }
      },
      deep: true
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
#v-mask {
  .content {
    // max-height: 500px;
    .row {
      padding-left: 0;
      line-height: 30px;

      .row-item {
        margin-bottom: 15px;
        .span-input {
          width: 160px;
          .el-date-editor.el-input,
          .el-date-editor.el-input__inner {
          }
        }
      }
      .row-item-title {
        text-align: right;
        width: 75px;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .row-item-textarea {
        width: calc(100% - 140px) !important;
        vertical-align: middle;
      }
      .row-item-select {
        position: relative;
        z-index: 9999;
      }
      .span-only-show {
        display: inline-block;
        width: 160px;
        line-height: 30px;
        border: 1px solid #ccc;
        height: 30px;
        border-radius: 3px;
        padding-left: 10px;
      }
      .span-file {
        width: 85px;
        position: relative;
        display: inline-block;
        overflow: hidden;
        vertical-align: middle;
        height: 28px;
        cursor: pointer;
        button,
        input {
          cursor: pointer;
          position: absolute;
          top: 0;
          left: 0;
          width: 100% !important;
          height: 100% !important;
        }
        input {
          opacity: 0;
          border: 0;
        }
      }
    }
    .row-item-headerImg {
      // line-height: 50px;
      margin-right: 15px;
      margin-top: -15px;
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
  }
  .personnel-management-box {
    .row-item-title {
      width: 105px !important;
    }
    .role-name {
      width: 120px !important;
      display: inline-block;
    }
    .show-text-span {
      position: relative;
      .show-text-i {
        width: 60%;
        height: 60%;
        z-index: 99;
        position: absolute;
        left: 2px;
        top: 8px;
      }
    }
    .table-role-list {
      background-color: #000;
    }
  }
  .beyond-details.content {
    .row {
      .row-item-title {
        width: 120px;
      }
      .border-line {
        width: 120px;
        min-height: 32px;
      }
    }
  }
  .modify-directories {
    .row-item-title {
      min-height: 10px;
    }
    .fs12 {
      color: #999;
      // margin-left: 12px;
    }
    .subordinate-catalogue-val {
      cursor: pointer;
      padding: 0 10px;
      border: 1px solid #e5e5e5;
    }
    .el-icon-arrow-right {
      display: inline-block;
      transition: 0.5s transform ease;
    }
    .el-icon-arrow-right.down {
      transform: rotate(90deg);
    }
    .panel-down {
      position: absolute;
      left: 75px;
      top: 40px;
      z-index: 9;
      min-width: 80%;
      min-height: 200px;
      overflow-y: scroll;
      background-color: #fff;
      border: 1px solid #e5e5e5;
      padding: 10px 12px;
      .deep0 {
        color: #333;
      }
      .deep1 {
        padding-left: 10px;
        color: #999;
      }
      .deep2 {
        padding-left: 14px;
        color: #999;
      }
      .deep3 {
        padding-left: 18px;
        color: #999;
      }
    }
  }
  .customer-template-edit.content {
    .row {
      margin-bottom: 8px;
    }
    .field-name-box-add-input {
      max-height: 300px;
      overflow: auto;
      .span-input {
        width: 160px;
        margin-left: 75px;
        margin-bottom: 8px;
      }
    }
  }
  .generate-work-order.content {
    .row-item-title {
      text-align: right;
      width: 80px;
    }
    .span-procedures {
      position: relative;
      .procedures {
        display: none;
        width: 850px;
        bottom: -18px;
        left: -80px;
        position: absolute;
        line-height: 20px;
        font-size: 10px;
        i {
          font-size: 10px;
        }
      }
    }
    .row-processing-records {
      position: relative;
      .processing-records {
        position: absolute;
        left: 515px;
        .row-item-title {
          width: 100px;
        }
        .border-line {
          max-height: 300px;
          width: 220px;
          overflow: auto;
        }
        p {
        }
        ul {
          li {
            // padding-left: 10px;
          }
        }
      }
    }
  }
  .quality-handle.content {
    .row {
      .row-item {
        .row-item-title {
          width: 100px;
        }
      }
    }
  }
  .record-details.content {
    .row {
      .row-item {
        .span-input {
          width: 300px;
          margin-right: 35px;
        }
      }
    }
  }
  .add-work-order.content {
    //生成工单
    .row {
      .row-item {
        .row-item-title {
          width: 100px;
        }
      }
    }
  }
  .change-customer-field.content {
    .row {
      .row-item {
        .row-item-title {
          width: 75px;
        }
        .el-checkbox {
          margin-right: 8px;
        }
      }
    }
    .row-tips {
      background-color: rgb(217, 237, 247);
      line-height: 22px;
      padding: 8px;
      border-radius: 3px;
    }
  }
  .details.content {
    .row-item-title {
      width: 85px;
    }
    .span-only-show {
      width: 160px;
    }
  }
  .change-information {
    text-align: center;
  }
  .change-password {
    text-align: center;
    padding-left: 25px;
    .row-item-title {
      display: inline-block;
      width: 80px;
    }
  }
  .audio-details {
    border-top: 1px solid #ccc;
    padding: 10px 25px 0;
    margin: 0 -25px;
    margin-bottom: 0 !important;
    padding-left: 25px !important;
    audio {
      width: 100%;
    }
    .row-item {
      width: 65%;
      margin-right: 0;
      margin-bottom: 10px;
    }
    .row-item-r {
      width: 35%;
    }
  }
  .work-order-details,
  .generate-work-order {
    .row {
      .row-item-title {
        width: 130px !important;
      }
    }
  }
}
</style>
